<template>
    <div id="new_home">
            <div class="shoplist">
   		            <empty v-if="!shopList || shopList.length === 0" message="暂无身边店"></empty>
                 <ul>
                    <li class="main" v-for="(item,index) in shopList" :key="index">
                        <div class="header">
                            <div class="distance" @click="goMap(item.name,item.longitude,item.latitude)">{{ item.distance }}</div>
                            <div class="special">{{ item.special}}</div>
		                        <div class="good"><i class="iconfont icon-ai45"></i></div>
		                        <div class="stars"><starPercent :percent="item.creditRate*20"></starPercent></div>
                        </div>
                        <div class="row"  @click="goShopAbout(item.name)">
                          <div class="img">
                              <img :src="item.logo == '/resources/icar/images/logo1.png' ? defaultImg : (item.logo ? addPath(item.logo) : defaultImg)" height="100%" width="100%">
                          </div>
                          <div class="content">
                              <div><h4>{{item.name}}</h4></div>
                              <div class="content-wrapper">
                                <ul>
                                  <li v-for="(value,index) in item.promiseContents" :key="index">{{value}}</li>
                                </ul>
                              </div> 
                              <div class="footer">
                                <!-- <div class="iconfont icon-renyuan"></div>
                                <div class="margin-r">{{item.attendNum || 0}}</div> -->
                                <div class="iconfont icon-gzrs"></div>
                                <div class="margin-r">{{item.follow || 0}}</div>
                            </div>
                          </div>
                        </div>
                    </li>
                  </ul>
          </div>
    </div>
</template>
<script>
import getLocation from "services/get-location";
import defaultImg from "assets/flagImg.png";
import empty from "components/empty-page";
import starPercent from "components/star-percent";
//services
import shopListServices from "services/vfhz/shop_list";
import wx from "weixin-js-sdk";
export default {
  components: {
    empty,
    starPercent
  },
  data() {
    return {
      activeTab: "tab2",
      latitude: "0",
      longitude: "0",
      city: "",
      shopList: [],
      shopListEmpty: "false",
      latitude: "43.821877",
      longitude: "125.239955",
      positionArr: [],
      cityId: "1567",
      recommendObj: [],
      shieldObj: [],
      defaultImg: defaultImg,
      shieldIndex: -5,
      recommendIndex: -5,
      count: "5",
      init: true,
      recommendAllLoaded: false,
      shieldAllLoaded: false,
      isWxPublic: false
    };
  },
  created() {
    if (this.$.env === "wxPublic") {
      this.isWxPublic = true;
    }
    this.getPosition();
  },
  mounted() {},
  methods: {
    //计算距离
    getDistance(objs) {
      console.log(objs);
      for (let i = 0; i < objs.length; i++) {
        //      let date = obj[i].publishDate;
        //      obj[i].publishDate = date.substring(5, 11);
        let distance = getLocation.getFlatternDistance(
          objs[i].shop.latitude,
          objs[i].shop.longitude,
          this.latitude,
          this.longitude
        );
        distance = Math.ceil(distance); // 转换后的距离值
        objs[i].distance =
          distance > 1000
            ? (distance / 1000).toFixed(1) + "km"
            : distance < 100 ? " 100m " : distance + "m";
      }
      return objs;
    },
    //获取身边店列表
    getShopList() {
      shopListServices.bind(this)(
        {
          methodName: "ListUnionStoreByArea",
          areaId: this.cityId,
          searchValue: ""
        },
        res => {
          this.positionArr = res.positionArr;
          this.shopList = getLocation.getDistance(
            this.latitude,
            this.longitude,
            res.shopList
          );
          if (this.shopList.length === 0) {
            this.shopListEmpty = true;
          } else {
            this.shopListEmpty = false;
          }
        },
        err => {
          this.$.toast(err);
        }
      );
    },
    //获取位置信息城市id
    getPosition() {
      if (this.isWxPublic) {
        //获取签名
        let vm = this;
        vm.$.wxSign();
        wx.ready(function() {
          //        alert(JSON.stringify("wxwx"));
          wx.getLocation({
            type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function(res) {
              //            alert(JSON.stringify(res));
              getLocation.getAdd(res.latitude, res.longitude).then(res => {
                //              alert(JSON.stringify(res));
                let lat = res[0].y;
                let log = res[0].x;
                lat = lat.toFixed(6);
                log = log.toFixed(6);
                vm.latitude = lat;
                vm.longitude = log;
                getLocation.getCityName(vm.latitude, vm.longitude).then(res => {
                  let cityName = res.addressComponent.city;
                  getLocation.getCityId(cityName).then(res => {
                    vm.cityId = res.cityId;
                    vm.getShopList();
                  });
                });
              });
            }
          });
        });
      } else if (this.$.isWechat) {
        let getAdd = new BMap.Geolocation();
        let vm = this;
        getAdd.getCurrentPosition(
          function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
              alert("您的位置：" + r.point.lng + "," + r.point.lat);
              getLocation.getAdd(r.point.lat, r.point.lng).then(resBaiDuAdd => {
                console.log(resBaiDuAdd);
                vm.latitude = resBaiDuAdd[0].y;
                vm.longitude = resBaiDuAdd[0].x;
                //百度地图api获取城市名字
                getLocation
                  .getCityName(resBaiDuAdd[0].y, resBaiDuAdd[0].x)
                  .then(resName => {
                    console.log(resName);
                    let cityName = resName.addressComponent.city;
                    if (vm.$.nowCity === undefined) {
                      vm.$.nowCity = cityName;
                      vm.city = cityName;
                    }
                    vm.$.gpsCity = cityName;
                    //后台接口获取城市id
                    getLocation.getCityId(cityName).then(resCity => {
                      console.log(resCity);
                      if (vm.$.chooseCity === undefined) {
                        vm.$.chooseCity = resCity.cityId;
                      }
                      vm.cityId = resCity.cityId;
                      vm.getShopList();
                    });
                  });
              });
            }
          },
          { enableHighAccuracy: true }
        );
      } else {
        //桥接获取经纬度
        this.$.push("data_getLatLng", {}, resAdd => {
          alert(resAdd);
          let vm = this;
          let res = JSON.parse(resAdd);
          console.log(res);
          //百度地图api获取转换经纬度
          getLocation.getAdd(res.latitude, res.longitude).then(resBaiDuAdd => {
            console.log(resBaiDuAdd);
            vm.latitude = resBaiDuAdd[0].y;
            vm.longitude = resBaiDuAdd[0].x;
            //百度地图api获取城市名字
            getLocation
              .getCityName(resBaiDuAdd[0].y, resBaiDuAdd[0].x)
              .then(resName => {
                console.log(resName);
                let cityName = resName.addressComponent.city;
                if (vm.$.nowCity === undefined) {
                  vm.$.nowCity = cityName;
                  vm.city = cityName;
                }
                vm.$.gpsCity = cityName;
                //后台接口获取城市id
                getLocation.getCityId(cityName).then(resCity => {
                  console.log(resCity);
                  if (vm.$.chooseCity === undefined) {
                    vm.$.chooseCity = resCity.cityId;
                  }
                  vm.cityId = resCity.cityId;
                  vm.getShopList();
                });
              });
          });
        });
      }
    },
    //导航
    goMap(shopName, longitude, latitude){
        let point = [
          {
            longitude: longitude,
            latitude: latitude,
            name: shopName,
            route: true
          }
        ];
        console.log(point);
        this.$router.push({
          name: "map",
          params: {
            mapParams: point
          }
        });
    },
    //进入身边店详情
    goShopAbout(shopName) {
        this.$router.push({
          name: "shop_about",
          query: {
            shopName: shopName
          }
        });
    }
  }
};
</script>
<style lang="scss">
.shoplist {
  .result_empty{
    background-color: #F8F8F8;
  }
  .main{
    border-bottom:1px solid #EEE;
  }
  .header {
    display: flex;
    padding:10px 5px 5px 10px;
    div {
      flex: 1;
    }
  }
  .row {
    display: flex;
    .img {
      flex: 0 0 130px;
      padding:5px 10px;
      img {
        width: 130px;
        height: 100px;
      }
    }
    .content{
      flex: 1;
      padding:5px 10px;
      ul{
        display: flex;
        margin-top: 28px;
        li{
          flex: 1;
        }
      }
      .footer{
        margin-top: 28px;
        div{
          display: inline;
          text-align: center;
        }
      }
    }
  }
}
</style>
